<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <!-- 设置视口 -->
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!-- 使用js 动态设置 html的 font-size 修改 rem -->
  <script>
    // 10哪来的 我们在设计图中 人为的 分为了 10份
    document.querySelector('html').style.fontSize = window.screen.width / 10 + 'px';

    // 开发中一般不用这么写,这里写的目的是 方便测试
    window.onresize = function () {
      document.querySelector('html').style.fontSize = window.screen.width / 10 + 'px';
    }
  </script>
  <!-- 引入 自己的css -->
  <link rel="stylesheet" href="./css/index.css" />
  <title>title</title>
</head>

<!--
    rem适配案例步骤
      1.项目基本结构 css js fonts img sass 
      2.sass编译为css 并导入页面
      3.index.html
        设置视口
        使用js设置html的font-size 实现动态修改rem的大小
      4.量取设计图的尺寸
      5.转化为rem并设置到页面上
        例
          1. 设计图宽度为 640 
          2. 分为若干份,这里分为10分 1份是 640 / 10 = 64
          3. 1rem 在设计图中 就是 64px
          4. 把测量出来的px值 转化为 rem  
            假设为 100px  ->  100 / 64 rem
      6.页面中使用时 使用 计算出来的rem即可
      7.因为我们已经使用js动态的去修改了 html的fontsize 所以不同的页面打开 rem的大小是不同的,所有使用rem作为单位的元素 的尺寸都会跟着改变
        
          

-->

<body>
  <!-- 顶部的 橘黄色区域 工作时我们不用写 这里是 比划个意思 -->
  <img class='navBar' src="./img/toolbar.png" alt="">
  <div class="layout">
    <!-- 区域标题 -->
    <h2>全场优惠<span>0/1</span></h2>
    <!-- ticket -->
    <div class="ticket">
      <a class='icon-plus' href="javascript:void(0)"></a>
      <p>添加优惠</p>
    </div>
  </div>
</body>

</html>